<template>
  <div class="btn-warp">
    <div class="btn" :class="{ activeClass: route.name === 'Home' }" @click="goTo('Home')">
      Home
    </div>
    <div class="btn" :class="{ activeClass: route.name === 'About' }" @click="goTo('About')">
      About
    </div>
  </div>
  <div class="container">
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute(); // 使用useRoute获取当前路由实例

const goTo = (name: string) => {
  try {
    // 路由跳转
    router.push({ name });
  } catch (error) {
    console.error(`路由跳转失败: ${error}`);
  }
};
</script>

<style lang="scss" scoped>
.btn-warp {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 20px;
}

.btn {
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; // 添加背景颜色过渡效果
  // 给按钮添加激活和点击效果
  &.activeClass {
    background-color: #349876;
  }
  &:hover {
    background-color: #349876;
  }
  &:active {
    background-color: #29806b;
  }
}

.container {
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
</style>
